<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div>
                    <el-input size="small" v-model="deptName" placeholder="部门名称"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-button type="success" size="small" round>
                        <icon class="el-icon-search"/>
                        搜索
                    </el-button>
                    <el-button type="danger" size="small" round @click="openAdd">
                        <icon class="el-icon-plus"/>
                        新增
                    </el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <div style="padding-top: 20px">
            <el-table
                    :data="deptList"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    size="mini"
                    :default-expand-all="true"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                        prop="deptName"
                        label="部门"
                >
                </el-table-column>
                <el-table-column
                        prop="deptLeader"
                        label="负责人"
                >
                </el-table-column>
                <el-table-column
                        prop="deptLeaderPhone"
                        label="电话"
                >
                </el-table-column>
                <el-table-column
                        prop="createBy"
                        label="创建人">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-delete"
                                   @click="deleteById(scope.row.deptName,scope.row.id)"
                                   v-show="scope.row.deptName !== '人间草木集团' ">删除
                        </el-button>
                        <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="editAndAddTitle" :visible.sync="dialogAdd" center width="40%">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="部门名称">
                    <el-input size="small" v-model="ruleForm.deptName"></el-input>
                </el-form-item>
                <el-form-item label="部门负责人">
                    <el-input size="small" v-model="ruleForm.deptLeader"></el-input>
                </el-form-item>
                <el-form-item label="负责人电话">
                    <el-input size="small" v-model="ruleForm.deptLeaderPhone"></el-input>
                </el-form-item>

                <el-form-item label="上级部门">
                    <el-button style="width: 100%" size="small" @click="getDept"><span style="text-align: left"><span
                            v-show="nextDeptShow">部门</span><span v-show="clickDeptShow">{{deptParentName}}</span></span>
                    </el-button>
                </el-form-item>

                <el-form-item label="排序">
                    <el-input-number v-model="ruleForm.deptOrderNum" :min="1" :max="10" label="描述文字"></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="submitAdd" v-show="addShow">添加</el-button>
                    <el-button size="small" type="primary" @click="submitEdit" v-show="editShow">修改</el-button>
                    <el-button size="small">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog
                title="部门"
                :visible.sync="deptDialog"
                width="20%"
                center
                modal
                :destroy-on-close="true">
            <el-tree
                    :accordion="true"
                    :data="deptTree"
                    :props="defaultProps"
                    ref="tree"
                    @node-click="handleNodeClick"
            >
            </el-tree>
            <span slot="footer" class="dialog-footer">
    <el-button @click="getNodeNO" size="small">取 消</el-button>
    <el-button type="primary" @click="getNodeOK" size="small">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import {addDept, deleteDeptById, editDept, findDeptTree} from "../../api/deptApi";
    import {MessageBox, Message} from 'element-ui'

    export default {
        name: "SysDept",
        data() {
            return {
                addShow: false, //添加按钮
                editShow: false, //修改按钮
                clickDeptShow: false,
                nextDeptShow: true,
                deptDialog: false,
                dialogAdd: false,
                deptList: [],
                deptTree: [],//部门树
                ruleForm: {
                    deptName: '',
                    deptLeader: '',
                    deptLeaderPhone: '',
                    deptParentId: '',
                    deptOrderNum: '',
                },
                deptParentName: '',//上级部门名称
                defaultProps: {
                    label: 'deptName',
                    children: 'children',
                },
                editAndAddTitle: '',//添加和修改标题
            }
        },

        created() {
            this.findDept();
        },

        methods: {
            /**
             * 部门表格树
             */
            findDept() {
                findDeptTree().then(res => {
                    this.deptList = res.data;
                })
            },

            /**
             * 重置表单
             */
            formReset() {
                this.ruleForm = {
                    deptName: '',
                    deptLeader: '',
                    deptLeaderPhone: '',
                    deptParentId: '',
                    deptOrderNum: '',
                };
                this.deptParentName = '部门'
            },
            /**
             * 修改部门信息弹出框
             */
            edit(deptInfo) {
                this.ruleForm = deptInfo
                this.dialogAdd = true;
                this.addShow = false;
                this.editShow = true;
                this.nextDeptShow = false;
                this.clickDeptShow = true;
                this.editAndAddTitle = '修改部门';
                this.deptParentName = deptInfo.deptParentName;
            },

            /**
             * 提交修改
             */
            submitEdit() {
                editDept(this.ruleForm).then(() => {
                    Message.success("修改成功");
                    this.findDept();
                    this.dialogAdd = false;
                }).catch(() => {
                    Message.error("修改异常")
                });
            },

            /**
             * 删除部门
             */
            deleteById(deptName, id) {
                MessageBox.confirm('你确定删除部门为[' + deptName + ']此条记录吗', '安全提醒', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    deleteDeptById(id).then(() => {
                        this.$message.success("删除成功");
                        this.findDept();
                    }).catch(() => {
                        this.$message.error("删除失败");
                    })
                });
            },
            //添加
            submitAdd() {
                addDept(this.ruleForm).then(() => {
                    this.dialogAdd = false;
                }).catch(() => {

                })
            },

            getNodeNO() {
                this.deptDialog = false;
            },
            getNodeOK() {
                this.deptDialog = false;
                this.nextDeptShow = false;
                this.clickDeptShow = true;
            },
            openAdd() {
                this.formReset();
                this.dialogAdd = true;
                this.addShow = true
                this.editShow = false
                this.editAndAddTitle = '添加部门'
            },

            getDept() {
                this.deptDialog = true;
                findDeptTree().then(res => {
                    this.deptTree = res.data
                }).catch(() => {

                })
            },
            /**
             * 部门选择
             * @param nodeSelect
             */
            handleNodeClick(nodeSelect) {
                this.ruleForm.deptParentId = nodeSelect.id;
                this.deptParentName = nodeSelect.deptName;
            },
        }
    }
</script>

<style scoped>

</style>
